const { resolve } = require('path'); // path模块是Node内置的
// 导入ESLint插件
const ESLintPlugin = require('eslint-webpack-plugin');

//  引入插件 HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

// resolve: 用来拼接路径的函数

// 暴露配置对象
module.exports = {

  // 入口
  entry: './src/main.js',
  // 出口
  output: {
    // __dirname：当前配置文件所在的目录绝对路径
    path: resolve(__dirname, 'build'), // 打包文件所在的根目录 必须是绝对路径
    filename: 'js/bundle.js', // 打包生成的js文件名(可以带目录)
    clean: true, // 打包时, 会先自动清空打包文件夹
  },
  // 开发模式
  mode: 'development',
  // 配置 loader
  module: {
    rules: [
      // 配置 css 文件处理
      {
        test: /\.css$/, // 处理css文件
        use: [
          "style-loader",		// 将 CSS 生成 style 标签插入 HTML 中
          "css-loader",  		// 将 CSS 转为 CommonJS 的模块
        ]
      },
      // 配置less 文件处理
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      // 配置babel的loader   ES6 => ES5
      {
        test: /\.js$/, // 处理js文件
        exclude: /(node_modules)/, // 不对node_modules下的js进行处理
        use: { // 使用指定loader
          loader: 'babel-loader',
          options: {
            // 指定babel的预设包
            // presets: ['@babel/preset-env'],
            // 修改 babel-loader 的配置
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',   // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 }  // 指定core-js的版本号为2
                }
              ]
            ],
            // 指定babel的插件
            plugins: []
          }
        }
      },
      // 处理图片
      {
        test: /\.(jpg|png|gif)$/,
        type: "asset",
        // 解析器
        parser: {
          // 指定进行图片base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          }
        },
        // 打包生成的文件
        generator: {
          // [name]: 图片原本的名称
          // [hash:8]: 图片内容的md5值, 保留前8位
          // [ext]: 图片的后缀名
          filename: 'images/[name]_[hash:8][ext]',
        },
      },
      // 配置 html 的 loader
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
  // 插件
  plugins: [
    // esLint插件
    new ESLintPlugin(),
    // 配置打包HTML的插件
    new HtmlWebpackPlugin({
      template: "./public/index.html",// 指定html模板文件。
      inject: "body",// 将打包生成的JS文件放置在body尾部
      // hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
      // minify: {
      //   removeAttributeQuotes: true,// 移除属性中的双引号
      //   removeComments: true,// 移除注释
      //   collapseWhitespace: true,// 去除空格与换行
      // }
    })

  ],

  // 开发服务器
  devServer: {
    // 端口号
    port: 4000,
    // 自动打开浏览器
    open: true
  }

}